<template>
	<view>
		<view style="display: flex;flex-direction: column;background-color: #fff;border-radius: 20rpx;margin: 20rpx;">
			<view style="display: flex;justify-content: space-between;align-items: center;padding: 30rpx;">
				<view style="width: 100rpx;height: 100rpx;border-radius: 50%;overflow: hidden;margin-right: 20rpx;">
					<image style="width: 100%;height: 100%;" :src="userAvatar(jobHuntDataDetail.avatar)"></image>
				</view>
				<view style="flex: 1;display: flex;flex-direction: column;justify-content: space-between;">
					<view style="font-size: 28rpx;">
						{{jobHuntDataDetail.username}}
					</view>
					<view style="font-size: 26rpx;color: #909399;">
						{{changeSex(jobHuntDataDetail.sex)}}
					</view>
				</view>
			</view>
			<u-line></u-line>
			<view style="display: flex;flex-direction: column;padding: 30rpx;">
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">求职岗位</view>
					<view style="font-size: 28rpx;">{{jobHuntDataDetail.job}}</view>
				</view>
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">工作区域</view>
					<view style="font-size: 28rpx;">{{jobHuntDataDetail.workLocation}}</view>
				</view>
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">期望薪资</view>
					<view style="font-size: 28rpx;">{{jobHuntDataDetail.salary}}</view>
				</view>
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">工作经验</view>
					<view style="font-size: 28rpx;">{{jobHuntDataDetail.workExperience}}</view>
				</view>
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">工作经历</view>
					<view style="font-size: 28rpx;">{{jobHuntDataDetail.workHistory}}</view>
				</view>
				<view style="display: flex;flex-direction: column;">
					<view style="font-size: 22rpx;color: #909399;">工作状态</view>
					<view style="font-size: 28rpx;">{{jobHuntDataDetail.jobStatus}}</view>
				</view>
			</view>
	
		</view>
		<!-- 收藏  拨打电话 -->
		<view class="buttom">
			<view class="collect-btn" @click="clickCollect">
				<u-icon name="star" size="24" :color="collectStatus?'#ffaa00':''"></u-icon>
				<text>{{collectStatus?'已收藏':'收藏'}}</text>
			</view>
			<view class="callPhone" @click="call(jobHuntDataDetail.telephone)">
				<u-icon name="phone" size="24" color="#fff"></u-icon>
				<text>拨打电话</text>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {getJobHuntDetail,getJobHuntCollectStatus,jobHuntCollectCancel,jobHuntCollect} from '../../config/api.js'
	import {mapGetters} from 'vuex'
	export default{
		data(){
			return {
				id:'',
				jobHuntDataDetail:{},
				collectStatus:''
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getJobHuntDetail()
		},
		onShow(){
			this.getJobHuntDetail()
		},
		computed:{
			...mapGetters(['getIsLogin','getBaseUrl'])
		},
		methods:{
			// 用戶头像
			userAvatar(pic){
				if(pic !=null && pic != ''){
					return pic.includes('http')?pic:this.getBaseUrl+pic
				}else{
					return pic
				}
			},
			// 请求数据
			getJobHuntDetail(){
				getJobHuntDetail({jobHuntId:this.id}).then(res =>{
					this.jobHuntDataDetail = res.data.data
					// 获取收藏状态
					this.getStatus()
				})
			},
			getStatus(){
				getJobHuntCollectStatus({jobHuntId:this.id}).then(res =>{
					this.collectStatus = res.data.data	
				})
			},
			// 收藏
			clickCollect(){
				console.log("点击收藏");
				if(this.getIsLogin){
					if(this.collectStatus){
						// 取消收藏
						jobHuntCollectCancel({jobHuntId:this.id}).then(res=>{
							this.collectStatus=0
							this.jobHuntDataDetail.collect--
							this.$refs.uToast.show({
								type:'warning',
								message:'取消收藏成功'
							})
						})
					}else{
						// 收藏
						jobHuntCollect({jobHuntId:this.id,collectType:'求职'}).then(res=>{
							this.collectStatus=1
							this.jobHuntDataDetail.collect++
							this.$refs.uToast.show({
								type:'success',
								message:'收藏成功'
							})
						})
					}
				}else{
					this.$refs.uToast.show({
						type:'warning',
						message:'请先登录'
					})
					setTimeout(function(){
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},1500)
				}
				
			},
			changeSex(e){
				if(e == 1){
					return '男'
				}
				if(e == 2){
					return '女'
				}
				if(e==0){
					return '未知'
				}
			},
			// 打电话
			call(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.buttom{
		display: flex;
		position: fixed;   // 固定定位
		flex-wrap: wrap;  //让弹性盒元素在必要的时候拆行
		justify-content: space-between;
		bottom: 0;
		box-shadow: 0 2px 2px rgba(10, 16, 20, 0.54), 0 0 2px rgba(10, 16, 20, 0.52);
		text-align: center;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;	
		.collect-btn{
			justify-content: center;
			align-items: center;
			display: flex;
			width: 50%;
		}
		.callPhone{
			width: 50%;
		    display: flex;
			flex-direction: row;  //主轴方向row 水平
			align-items: center;
			justify-content: center;
			color:#fff;
			background-color: #20C3FE;
		}
	}
</style>